<template>
    <div class='list-page'>
        <div class="inpt">
            Id:<input type="text" v-model="idS" value="idS">
            Name:<input type="text" v-model="name" value="name">
            <input type="button" value="添加" @click="add">
        </div>
        <ul>
            <transition v-for="(item, index) in list" :key="index" appear>
                <li @click='reduce(item.id)'>{{ item.idS }} - {{ item.name }}</li>
            </transition>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'list-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            idS: "",
            name: "",
            show: true,
            list: [
                {
                    id: '1',
                    idS: '1',
                    name: '苏落'
                },
                {
                    id: "2",
                    idS: '2',
                    name: '青山入怀'
                },
            ]
        }
    },
    methods: {
        add() {
            this.list.push({
                id: Math.random() + '',
                idS: this.idS,
                name: this.name
            })
            this.idS = ''
            this.name = ''
        },
        reduce(id) {
            this.list = this.list.filter(item => item.id != id)
        }
    }
}
</script>

<style scoped>
li {
    margin: 10px;
    padding: 5px;
    border: 1px #000 dotted;
}

li:hover {
    background: pink;
}

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateY(80px);
}

.v-enter-active,
.v-leave-active {
    transition: all 0.6s ease;
}

.v-enter-to {
    opacity: 1;
    transform: translateY(0px);
}
</style>